<template>
  <v-app>
    <SearchBar />
    <v-content class="px-1 grey lighten-3">
      <v-container fluid>
        <v-row dense>
          <v-col v-for="goods in goodsList" :key="goods.id" :cols="6">
            <div
              class="ma-1"
              @click="$router.push({ path: '/goods', query: { id: goods.id } })"
            >
              <v-img
                style="border-radius: 3px"
                :src="goods.albumPics.split(',')[0]"
                class="white--text align-end mb-1"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="100px"
              ></v-img>
              <div class="titleText subtitle-2">{{ goods.name }}</div>
              <div class="titleText caption grey--text text--lighten-0">
                {{ goods.subTitle }}
              </div>
              <div class="titleText caption red--text">
                {{ `￥${goods.price}` }}
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import request from '@/request/index';
import SearchBar from './components/SearchBar.vue';

export default {
  name: 'goods-list',
  components: { SearchBar },
  data() {
    return {
      goodsList: [],
      cards: [
        {
          title: 'Pre-fab homes',
          src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg',
          flex: 6
        },
        {
          title: 'Pre-fab homesa',
          src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg',
          flex: 6
        },
        {
          title: 'Favorite road trips',
          src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg',
          flex: 6
        },
        {
          title: 'Best airlines',
          src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',
          flex: 6
        }
      ]
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const { categoryId } = this.$route.query;
      request
        .get('/products', {
          params: { productCategoryId: categoryId }
        })
        .then(goodsList => {
          this.goodsList = goodsList.filter(goods => goods.publishStatus === 1);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.titleText {
  text-align: center;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  // text-overflow: ellipsis;
}
</style>
